<template>
	<div class="index">
		<div class="header">
			<div class="shell">
				<div>
					<div>账户ID</div>
					1018221
					<div>复制ID</div>
				</div>
				<div>修改密码</div>
			</div>
			<div class="shell">
				<div>
					<div class="store">总店</div>
					1018221
				</div>
				<div>退出登录</div>
			</div>
		</div>
		<div class="wallet">
			<div class="money">
				<van-icon class="icon" name="paid" />
				余额：5.68元
			</div>
			<div class="btn">
				<div>充值</div>
				<div>提现</div>
			</div>
		</div>
		<div class="invited">
			<p>会员邀请链接：https://vant-ui.github.io/vant/#/zh-CN/iconhttps://vant-ui.github.io/vant/#/zh-CN/icon</p>
			<div>
				<div @click="copy">
					<van-icon class="icon" name="description-o" />
					复制链接
				</div>
				<div>
					<van-icon class="icon" name="photo-o" />
					生成海报
				</div>
			</div>
		</div>
		<CodePopup v-model:show="show" />
	</div>
</template>
<script lang="ts" setup>
import CodePopup from "@/views/index/components/codePopup/CodePopup.vue";
import useIndex from "@/views/index/hooks/useIndex";

const { copy, show } = useIndex();
</script>
<style lang="stylus" scoped>
.index
	background: #f6f3f7;
	height 100%
	width: 100%

	> .header
		width: 100%
		padding 30px 20px
		box-sizing: border-box;
		background-color #fff

		> .shell
			width 100%
			display flex
			justify-content space-between
			align-items center
			color #2e2b2e
			font-size 14px
			margin-bottom 6px

			> div
				display flex

				align-items center
				font-size 13px

				> div
					padding 4px 8px
					box-sizing border-box
					border-radius 6px
					background-color #d6233e
					color #fff
					margin 0 4px 0 0

					&:last-of-type
						border-radius 10px
						margin 0 0 0 6px
						padding 4px 8px
						box-sizing border-box

				&:last-of-type
					width 100px
					height 26px
					justify-content center
					background-color #35b47e
					border-radius 18px
					color #fff
					align-items center

				> .store
					background-color #35b47e
					border-radius 6px !important
					margin 0 10px 0 0 !important

	> .wallet
		width 100%
		background-color #fff
		padding 12px 20px
		box-sizing border-box
		display flex
		justify-content space-between
		margin 10px 0

		> .money
			display flex
			align-items center
			font-size 14px


			> .icon
				color #35b47e
				margin-right 6px

		> .btn
			display flex

			> div
				padding 2px 14px
				box-sizing border-box
				background-color #35b47e
				border-radius 12px
				color #fff
				font-size 13px
				margin-right 10px

				&:last-of-type
					margin-right 0

	> .invited
		width 100%
		background-color #fff
		padding 10px 14px 0
		box-sizing border-box

		> p
			font-size 13px
			color #35b47e
			padding-bottom 10px
			box-sizing border-box
			word-break: break-all;

		> div
			width 100%
			display flex
			border-top 0.5px solid #eeeeee
			box-sizing border-box
			padding 10px 0

			> div
				flex 1
				display flex
				align-items center
				justify-content center
				font-size 13px

				> .icon
					color #35b47e
					margin-right 6px
</style>
